﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>登hhk录</title>
    <link href="css/base.css" rel="stylesheet" />
    <!--字体图标样式-->
    <link href="font/iconfont.css" rel="stylesheet" />
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/login.css" rel="stylesheet" />
    <!--表单验证-->
    <link href="css/formvalid.css" rel="stylesheet" />
</head>
<body>
    <div class="head">
        <div class="head-main container">
            <i class="icon iconfont fright">&#xe612;</i>
            <a href="javascript://"><img src="images/logo.png" /></a><span>欢迎登录</span>
        </div>
    </div>
    <div class="content">
        <div class="container">
            <div class="row  main">
                <div class="col-lg-7 col-md-7 col-sm-6 hidden-xs text-center">
                    <img src="images/dl.png" class="dl " />
                </div>
                <div class="col-lg-4 col-md-5 col-sm-6 col-xs-12">
                    <div class="loginBox"id="userlogin">
                        <h2>账号登录</h2>
                        <img src="images/ewm.png" class="ewm" />
                        <!--给 form-group 在不同状态下添加样式
                            1.点击输入:.OK
                            2.错误样式:.error
                            3.警告样式:.warning
                            4.成功样式:.success
                            -->

                        <div class="form-body marginTop10">
                            <div class="form-group">
                                <div class="input-group col-xs-12">
                                    <i class="icon iconfont">&#xe615;</i>
                                    <input type="text" class="form-control" placeholder="账号" aria-describedby="basic-addon1" id="login_username">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group col-xs-12">
                                    <i class="icon iconfont" style="font-size:20px;top:2px;">&#xe614;</i>
                                    <input type="password" class="form-control" placeholder="密码" aria-describedby="basic-addon1" id="login_passwd">
                                </div>
                            </div>
                            <div style="height: 35px; margin-bottom: 16px;">
                                <div class="form-group error" style="margin-bottom: 0;  ">
                                    <div class="prompt col-xs-12">
                                        请输入您的登录密码
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="no-space">
                                    <div class="checker">
                                        <input type="checkbox" id="fast" />
                                        <label for="fast">下次自动登录</label>
                                    </div>
                                </div>
                                <div class="text-right no-space"><a href="#" class="blue" id="forgetpassword"onclick="window.location.href ='forgetpassword.html'; return false">忘记密码</a></div>
                            </div>
                            <div class="form-group marginBot8">
                                <button id="login" class="btn btn-block orange" type="button" >立即登录</button>
                            </div>
                            <div class="pass-login">
                                <span>可以使用以下方式登录</span>
                                <ul>
                                    <li class="qq"><a href="javascript://"><i class="icon iconfont">&#xe617;</i></a></li>
                                    <li class="wx"><a href="javascript://"><i class="icon iconfont">&#xe616;</i></a></li>
                                    <li class="wb"><a href="javascript://"><i class="icon iconfont">&#xe618;</i></a></li>
                                </ul>
                            </div>
                            <div class="form-group">
                                <button class="btn btn-block gray col-xs-12" type="button" id="butrequest"onclick="window.location.href ='register.html'; return false">
                                    注册新用户
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="container">
            <p class="foot-list">
                <span><a href="javascript://">平台介绍</a>|</span>
                <span><a href="javascript://">意见建议</a>|</span>
                <span><a href="javascript://">网站地图</a>|</span>
                <span><a href="javascript://">友情链接</a>|</span>
                <span><a href="javascript://">联系方式</a></span>
            </p>
            <p class="copyright">
                <span>版权所有 智慧文化云 Copyright2003-2016 All Rights Reserved 沪ICP备1143884号</span>
                <span>沪公网安备11010234000430号 上海上业信息科技有限公司</span>
            </p>
        </div>
    </div>
    <!--js引用1-->
    <script src="js/respond.src.js"></script>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script>
        function gg() {
            //中间区域高度
            var midHeight = $(window).height() - $(".head").height() - $(".footer").height() - 10;
            //中间主要内容上下居中
            var marginTops = (midHeight - 412) / 2;
            //中间（左侧图片上下居中)
            var marginTopsImg = (412 - $(".dl").height()) / 2 * 0.8;
            if (marginTops > 10) {
                $(".content").height(midHeight);
                $(".main").css("margin-top", marginTops + "px");
            }
            else {
                $(".content").height(422);
                $(".main").css("margin-top", "10px");
            }
            if (marginTopsImg > 10) {
                $(".dl").css("margin-top", marginTopsImg + "px");
            }
            else {
                $(".dl").css("margin-top", "10px");
            }
            if ($(window).height() < 560) {
                $("body").css("overflow", "scroll");
            }
            else {
                $("body").css("overflow", "hidden");
            }
        }
        window.onload= function () {
            gg();

            //注册新用户
            $("#butrequest").click(function(){
                $("#userrequest").removeClass("hide").siblings(".loginBox").addClass("hide");
            });
            $(".form-control").focus(function () {
                $(this).siblings("i").css("color","#66afe9")
            }).blur(function(){
                $(".form-control").siblings("i").css("color","#999")
            })
        }
        window.onresize = function () {
            gg();
        }
    </script>

</body>
</html>
